<template>
  <div class="exhibition-layout">
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">{{ '展会布局' }}</h1>
        <p class="page-subtitle">{{ pageData.subtitle || '2025年FAIR plus机器人全产业链接会整体布局' }}</p>
      </div>
    </div>
    <div class="container">
      <section class="layout-section">
        <h2 class="section-title">{{ pageData.title || '展会布局' }}</h2>
        <div class="layout-content">
          <div class="layout-intro">
            <h3>展会整体规划</h3>
            <div v-html="pageData.content || defaultContent"></div>
          </div>
          
          <div class="layout-overview">
            <div class="overview-stats">
              <div class="stat-item">
                <h4>{{ layoutStats.totalArea || '105,000㎡' }}</h4>
                <p>总面积</p>
              </div>
              <div class="stat-item">
                <h4>{{ layoutStats.mainAreas || '3' }}</h4>
                <p>主要展区</p>
              </div>
              <div class="stat-item">
                <h4>{{ layoutStats.totalBooths || '800+' }}</h4>
                <p>展位数量</p>
              </div>
              <div class="stat-item">
                <h4>{{ layoutStats.functionalAreas || '10+' }}</h4>
                <p>功能区域</p>
              </div>
            </div>
          </div>

          <div class="layout-areas">
            <h3>展区分布</h3>
            <div class="areas-grid">
              <div class="area-card" v-for="area in exhibitionAreas" :key="area.id">
                <div class="area-header">
                  <h4>{{ area.name }}</h4>
                  <span class="area-size">{{ area.size }}</span>
                </div>
                <div class="area-image">
                  <img :src="area.image" :alt="area.name">
                </div>
                <div class="area-content">
                  <p>{{ area.description }}</p>
                  <div class="area-features">
                    <span v-for="feature in area.features" :key="feature" class="feature-tag">{{ feature }}</span>
                  </div>
                  <div class="area-stats">
                    <span>展位: {{ area.booths }}</span>
                    <span>展商: {{ area.exhibitors }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="functional-areas">
            <h3>功能区域</h3>
            <div class="functional-grid">
              <div class="functional-item" v-for="functional in functionalAreas" :key="functional.id">
                <div class="functional-icon">
                  <el-icon><component :is="getIconComponent(functional.icon)" /></el-icon>
                </div>
                <div class="functional-info">
                  <h4>{{ functional.name }}</h4>
                  <p>{{ functional.description }}</p>
                  <span class="functional-location">{{ functional.location }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="layout-map">
            <h3>展馆平面图</h3>
            <div class="map-container">
              <div class="map-image">
                <img :src="pageData.imageUrl || defaultMapImage" alt="展馆平面图">
              </div>
              <div class="map-legend">
                <div class="legend-item" v-for="legend in mapLegend" :key="legend.id">
                  <div class="legend-color" :style="{ backgroundColor: legend.color }"></div>
                  <span>{{ legend.label }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { 
  Location,
  VideoCamera,
  Microphone,
  Coffee,
  Van,
  User,
  Document,
  Star
} from '@element-plus/icons-vue'
import { subpageApi } from '@/api/user'

export default {
  name: 'ExhibitionLayout',
  setup() {
    const pageData = ref({})
    const layoutStats = ref({})
    
    // 默认内容
    const defaultContent = `
      <p>2025年FAIR plus机器人全产业链接会将在华南国际会展中心举办，总面积达50,000平方米，分为三个主要展区和多个功能区域，为展商和观众提供最佳的展示和交流环境。</p>
    `
    const defaultMapImage = 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop'
    
    // 默认展区数据
    const defaultExhibitionAreas = [
      {
        id: 1,
        name: 'A区 - 工业机器人展区',
        size: '20,000㎡',
        description: '展示各类工业机器人、自动化设备和智能制造解决方案，是展会的核心展区。',
        image: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=300&fit=crop',
        features: ['工业机器人', '自动化设备', '智能制造'],
        booths: '300+',
        exhibitors: '200+'
      },
      {
        id: 2,
        name: 'B区 - 服务机器人展区',
        size: '15,000㎡',
        description: '展示服务机器人、医疗机器人、教育机器人等应用，体现机器人技术的多元化发展。',
        image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop',
        features: ['服务机器人', '医疗机器人', '教育机器人'],
        booths: '250+',
        exhibitors: '150+'
      },
      {
        id: 3,
        name: 'C区 - 技术创新展区',
        size: '15,000㎡',
        description: '展示最新技术成果、创新产品和研发项目，是技术交流的重要平台。',
        image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop',
        features: ['技术创新', '研发项目', '创新产品'],
        booths: '250+',
        exhibitors: '180+'
      }
    ]

    // 默认功能区域数据
    const defaultFunctionalAreas = [
      {
        id: 1,
        name: '主会场',
        description: '开幕式、闭幕式及重要活动举办场地',
        location: 'A区中央',
        icon: 'Microphone'
      },
      {
        id: 2,
        name: '会议中心',
        description: '技术论坛、行业会议、商务洽谈',
        location: 'B区东侧',
        icon: 'VideoCamera'
      },
      {
        id: 3,
        name: '媒体中心',
        description: '新闻发布、媒体采访、直播区域',
        location: 'C区西侧',
        icon: 'Document'
      },
      {
        id: 4,
        name: '休息区',
        description: '观众休息、餐饮服务、商务交流',
        location: '各展区连接处',
        icon: 'Coffee'
      },
      {
        id: 5,
        name: '物流中心',
        description: '展品运输、仓储管理、设备维护',
        location: '展馆北侧',
        icon: 'Van'
      },
      {
        id: 6,
        name: '服务中心',
        description: '观众咨询、展商服务、技术支持',
        location: '展馆入口',
        icon: 'User'
      }
    ]

    // 展区数据
    const exhibitionAreas = ref([])
    
    // 功能区域数据
    const functionalAreas = ref([])

    // 地图图例
    const mapLegend = ref([
      { id: 1, label: '工业机器人展区', color: '#667eea' },
      { id: 2, label: '服务机器人展区', color: '#764ba2' },
      { id: 3, label: '技术创新展区', color: '#f093fb' },
      { id: 4, label: '功能区域', color: '#4facfe' }
    ])

    // 获取图标组件
    const getIconComponent = (iconName) => {
      const iconMap = {
        'Location': Location,
        'VideoCamera': VideoCamera,
        'Microphone': Microphone,
        'Coffee': Coffee,
        'Van': Van,
        'User': User,
        'Document': Document,
        'Star': Star
      }
      return iconMap[iconName] || Location
    }

    // 加载页面数据
    const loadPageData = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'exhibition-layout')
        if (response && response.code === '200' && response.data) {
          pageData.value = response.data
          
          // 如果后端有自定义的布局统计数据，可以在这里解析
          // 暂时使用默认数据
          layoutStats.value = {
            totalArea: '105,000㎡',
            mainAreas: '3',
            totalBooths: '800+',
            functionalAreas: '10+'
          }
          
          exhibitionAreas.value = defaultExhibitionAreas
          functionalAreas.value = defaultFunctionalAreas
        } else {
          // 使用默认数据
          layoutStats.value = {
            totalArea: '105,000㎡',
            mainAreas: '3',
            totalBooths: '800+',
            functionalAreas: '10+'
          }
          exhibitionAreas.value = defaultExhibitionAreas
          functionalAreas.value = defaultFunctionalAreas
        }
      } catch (error) {
        console.error('加载展会布局数据失败:', error)
        // 使用默认数据作为回退
        layoutStats.value = {
          totalArea: '105,000㎡',
          mainAreas: '3',
          totalBooths: '800+',
          functionalAreas: '10+'
        }
        exhibitionAreas.value = defaultExhibitionAreas
        functionalAreas.value = defaultFunctionalAreas
      }
    }

    onMounted(() => {
      loadPageData()
    })

    return {
      pageData,
      layoutStats,
      exhibitionAreas,
      functionalAreas,
      mapLegend,
      getIconComponent,
      defaultContent,
      defaultMapImage
    }
  }
}
</script>

<style scoped>
.exhibition-layout {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.layout-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.layout-content {
  max-width: 1000px;
  margin: 0 auto;
}

.layout-intro {
  margin-bottom: 3rem;
}

.layout-intro h3 {
  font-size: 1.8rem;
  color: #320063;
  margin-bottom: 1rem;
}

.layout-intro p {
  color: #666;
  line-height: 1.8;
  font-size: 1.1rem;
}

/* 富文本内图片限制 */
.layout-intro :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
  border-radius: 8px;
}

.layout-overview {
  margin-bottom: 3rem;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.stat-item {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  border-radius: 15px;
  border: 1px solid #e0e7ff;
}

.stat-item h4 {
  font-size: 2.5rem;
  color: #320063;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.stat-item p {
  color: #666;
  font-size: 1rem;
  margin: 0;
}

.layout-areas {
  margin-bottom: 3rem;
}

.layout-areas h3 {
  font-size: 1.8rem;
  color: #320063;
  margin-bottom: 2rem;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.area-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.area-card:hover {
  transform: translateY(-5px);
}

.area-header {
  background: linear-gradient(135deg, #320063 0%, #667eea 100%);
  color: white;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.area-header h4 {
  font-size: 1.3rem;
  margin: 0;
}

.area-size {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.area-image {
  height: 200px;
  overflow: hidden;
}

.area-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.area-content {
  padding: 1.5rem;
}

.area-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.area-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.feature-tag {
  background: #f0f4ff;
  color: #320063;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  border: 1px solid #e0e7ff;
}

.area-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: #666;
}

.functional-areas {
  margin-bottom: 3rem;
}

.functional-areas h3 {
  font-size: 1.8rem;
  color: #320063;
  margin-bottom: 2rem;
}

.functional-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.functional-item {
  display: flex;
  align-items: flex-start;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  border-radius: 15px;
  border: 1px solid #e0e7ff;
  transition: transform 0.3s ease;
}

.functional-item:hover {
  transform: translateY(-3px);
}

.functional-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #320063 0%, #667eea 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.functional-icon .el-icon {
  font-size: 1.2rem;
  color: white;
}

.functional-info h4 {
  font-size: 1.1rem;
  color: #320063;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.functional-info p {
  color: #666;
  line-height: 1.6;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.functional-location {
  color: #320063;
  font-size: 0.8rem;
  font-weight: 600;
}

.layout-map {
  margin-bottom: 2rem;
}

.layout-map h3 {
  font-size: 1.8rem;
  color: #320063;
  margin-bottom: 2rem;
}

.map-container {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.map-image {
  margin-bottom: 2rem;
  border-radius: 10px;
  overflow: hidden;
}

.map-image img {
  width: 100%;
  height: auto;
  display: block;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.legend-item span {
  color: #666;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .layout-section {
    padding: 2rem;
    margin: 1rem 0;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .areas-grid {
    grid-template-columns: 1fr;
  }
  
  .functional-grid {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }
}
</style>